<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2023/3/29
  Time: 22:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>登录界面</title>
</head>
<body>

    <div style="display: flex">
        <div style="display: inline;">
            <span id="warn" style="font-size: 15px;color: red;font-weight: 500;">${warn}</span><br>
            <form action="http://localhost:8080/ExaminationManagement1_war/Login" method="post" id="login">
                <div>
                    <label for="username" class="tip" style="width: 50px;">用户名</label>
                    <input type="text" name="username" id="username" placeholder="用户名" maxlength="10" style="margin-bottom: 20px;" value="${cookie.username.value}"><br>
                </div>
                <div style="margin-left: 16px;">
                    <label for="password" class="tip" style="width:50px">密码</label>
                    <input style="margin-bottom: 20px;" type="password" name="password" id="password" maxlength="16" placeholder="密码(可含字母,数字,下滑线,8-16位)" value="${cookie.password.value}"><br>
                </div>
                <div><label for="checkcodeinput" style="width: 50px;">验证码</label>
                    <input type="text" maxlength="4" placeholder="验证码" name="checkcode" id="checkcodeinput">
                </div>
                <div>
                    <input type="checkbox" value="1" name="remember">记住密码
                </div>
                <input type="submit" value="登录">
                <div>
                    <a href="registe.jsp">还没有账号,点我注册</a>
                </div>
                <div>
                    <a href="aboutme.jsp">关于我们</a>
                </div>
            </form>
        </div>
        <div style="width: 250px;height: 50px;margin-top:90px;margin-left: 20px;display:flex">
            <img src="http://localhost:8080/ExaminationManagement1_war/GetCheckcode" onclick="changecode()" id="checkcodeimage">
        </div>
    </div>
</body>
<script>
    function changecode(){
        var changecode= document.getElementById("checkcodeimage")
        changecode.src="http://localhost:8080/ExaminationManagement1_war/GetCheckcode?"+new Date().getMilliseconds()
    }

    var username=document.getElementById("username")
    var warn =document.getElementById("warn")
    username.onblur=function(){
        let value=username.value.trim()
        var flag1=false
        if(value){
            warn.innerHTML=""
            flag1=true
        }else{
            warn.innerHTML="用户名不能为空"
        }
    }
    var password=document.getElementById("password")
    password.onblur=function(){
        let value=password.value
        var flag2=false
        let reg=/^\w{5,10}$/
        if(reg.test(value)){
            warn.innerHTML=""
            flag2=true
        }else{
            warn.innerHTML="密码格式不正确"
        }
    }
    var checkcode=document.getElementById("checkcodeinput")
    checkcode.onblur=function(){
        let value=checkcode.value
        var flag3=false
        let reg=/^\w{4}$/
        if(reg.test(value)){
            warn.innerHTML=""
            flag3=true
        }else{
            warn.innerHTML="验证码不正确"
        }
    }
    var login=document.getElementById("login")
    login.onsubmit=function(){
        if(flag1&&flag2&&flag3){
            return true
        }
        return false
    }

</script>
</html>
